<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="找回支付密码" mtClass="no-bg" rightIcon="icon-guanbi"/>
        <div class="iconStep">
            <div :class="{'active':inputValuePwd}">
                <i slot="icon" class="icon iconfont icon-zhengjianhaoma"></i>
                <span>输入密码</span>
            </div>
            <div class="line"></div>
            <div :class="{'active':inputValueCode}">
                <i slot="icon" class="icon iconfont icon-shouji"></i>
                <span>手机验证</span>
            </div>
            <div class="line"></div>
            <div :class="{'active':inputValuePayPwd || inputValuePayPwdAgain}">
                <i slot="icon" class="icon iconfont icon-icon2"></i>
                <span>重置密码</span>
            </div> 
        </div>
        <div class="list">
            <inputPwd tips="请输入您的登入密码" class="bottom-border" @sendPwdToParent="getPwdFromChild"></inputPwd>
            <countdown @sendValueToParent="getValueFromChild" :mobile="$route.query.mobile"></countdown>
        </div>
        <div class="tips toSet" @click="toFindPwd" v-show="loginPassword=='1'">未设置登录密码？前往设置》</div>
        <div class="blank-9"></div>
        <div class="list bottom-border">
            <inputPayPwd title="输入新支付密码" @sendValueToParent="getPayPwdFromChild"></inputPayPwd>
            <inputPayPwd title="重新输入新支付密码" @sendValueToParent="getPayPwdFromChildAgain"></inputPayPwd>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValuePwd&&inputValueCode&&inputValuePayPwd&&inputValuePayPwdAgain)?false:true" @click.native="editPayPwd">完成</mt-button>
        </div>
        <div class="tips">支付密码仅支持6位数字</div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import countdown from "@/components/Countdown"
import inputPwd from "@/components/InputPwd"
import inputPayPwd from "@/components/InputPayPwd/index"
import {checkPhone} from '@/utils/index'
import { MessageBox, Toast } from 'mint-ui';
import { UpdatePayPassword } from '@/api/api'
import { mapActions } from 'vuex'
export default {
    name: 'App',
    data(){
        return {
            inputValuePwd:'',
            inputValueCode:'',

            inputValuePayPwd:'',
            inputValuePayPwdAgain:'' ,
            loginPassword: '0' 
        }
    },
    components:{
        mtHeader,
        countdown,
        inputPwd,
        inputPayPwd
    },
    mounted(){
        this.init()
    },
    methods:{
        ...mapActions('user', [
            'get_userInfo_data'
        ]),
        init(){
            // 用户信息
            this.get_userInfo_data().then(res => {
                this.loginPassword = res.loginPassword
            })
        },
        getPwdFromChild(value){
            this.inputValuePwd = value;
        },
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        getPayPwdFromChild(value){
            this.inputValuePayPwd = value;
        },
        getPayPwdFromChildAgain(value){
            this.inputValuePayPwdAgain = value;
        },
        editPayPwd(){
            UpdatePayPassword({
                validationCode: this.inputValueCode,
                payPassword: this.inputValuePayPwd,
                loginPassword : this.inputValuePwd
            }).then(res => {
                if( res.code == 200 ){
                    MessageBox({
                        title: '提醒',
                        message: '设置成功',
                        confirmButtonText:'我知道了',
                    }).then(action => {
                        this.$router.push('/account/setting');
                    });
                }else{
                    Toast({
                        message: res.msg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                }
            })
        },
        toFindPwd(){
            this.$router.push({
                path:'/findpwd',
                query:{ from:'findPayPwd' }
            });
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .iconStep{
        width:100%;
        margin:0 auto;
        height:100px;
        background:#F2F3F9;
        padding:27px 15%;
        display:flex;
        .line{
            height:100%;
            position:relative;
            &::before{
                content:"";
                width:80%;
                height:1px;
                background:#C6CED9;
                position:absolute;
                left:10%;
                top:30%;
            }
        }
        &>div{
            flex:1;
            text-align: center;
            &.active{
                color:#5F88FF;
            }
            color:#C6CED9;
            .icon{
                font-size:22px;
                display:block;
                margin-bottom: 5px;
            }
            span{
                font-size:11px;
            }
        }
    }
    .list{
        color:#BFBFBF;
    }
    .tips{
        color:#BFBFBF;
        &.toSet{
            margin:7px 0 7px 0;
            text-align:right;
            color:#5F88FF;
        }
    }
}
</style>
